<template>
	<div class="home">
		<div class="main" :style="{ left: showsider ? '0' : '-160px' }">
			<headerMobile v-if="showMobile" @ontab="onmove" :showsider="showsider" :style="{ left: showsider ? '0' : '-160px' }">
			</headerMobile>
			<headering v-else @ontab="ontab" :showindex="showindex" :showHeader="showHeader" :headerList="headerList" />
			<div class="flex-c" style="min-height: 300px;width: 100%;position: absolute;top: 0;background-color: #fff;">
				<homepage v-if="showindex == 0" :productList="productList" :applicationList="applicationList"
					:newList="newList" :showMobile="showMobile"></homepage>
				<abouting v-if="showindex == 1"></abouting>
				<producting v-if="showindex == 2" :productList="productList"></producting>
				<applicationing v-if="showindex == 3" :applicationList="applicationList"></applicationing>
				<newing v-if="showindex == 4" :newList="newList"></newing>
				<telephoneing v-if="showindex == 5"></telephoneing>
				<footering v-if="!showMobile" :productList="productList" :applicationList="applicationList"></footering>
				<div v-else class="flex-c flex-j flex-a"
					style="width: 100%;height: 66px;background-color: #1B1B1B;color: #fff;font-size: 12px;">
					<div>Copyright © 2018-{{ new Date().getFullYear() }} 天桦生物科技</div>
					<a style="text-decoration:none;color: #fff;margin-top: 5px;" target="_blank"
						href="https://beian.miit.gov.cn/#/Integrated/index">京ICP备18045323号-2</a>
				</div>
			</div>
		</div>
		<div class="siders" :style="{ right: showsider ? '-160px' : '0' }">
			<div class="flex-c">
				<div style="height: 80px;"></div>
				<div class="card" v-for="(item, index) in headerList" @click="ontab(index, item?.list)">
					<div class="card">{{ item.name }}</div>
					<transition-group appear name="animate__animated animate__bounce" enter-active-class="animate__flipInX"
						leave-active-class="animate__flipOutX" :duration='500'>
						<div v-if="item.show" class="flex-c" style="width: 100%;min-height: 46px;background: #000;">
							<div v-for="(ite, ins) in item.list" class="cards" @click.stop="onurl(index, ins)">
								{{ ite.name }}
							</div>
						</div>
					</transition-group>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import headering from '@/components/main/header.vue'
import headerMobile from '@/components/main/mobile/header.vue'
import homepage from '@/components/main/homepage.vue'
import abouting from '@/components/main/about.vue'
import producting from '@/components/main/product.vue'
import applicationing from '@/components/main/application.vue'
import newing from '@/components/main/new.vue'
import telephoneing from '@/components/main/telephone.vue'
import footering from '@/components/main/footer.vue'
import { storeToRefs } from 'pinia'
import useAppStore from '@/store/modules/home'
import { service } from '@/request/http'
import { isMobile } from '@/utils/index'
const url = import.meta.env.VITE_APP_BASE_URL
const urlnum = ref()
const urlnumjing = ref()
if (url == 'https://tianhua.hanongyinon.cn/') {
	urlnum.value = 1
	urlnumjing.value = '11010802043133'
} else {
	urlnum.value = 2
}
const headerList = ref([
	{
		name: '首页',
	},
	{
		name: '关于我们',
		show: false,
		list: [
			{
				name: '公司简介',
			},
			{
				name: '实力证明',
			}
		]
	},
	{
		name: '产品介绍',
		show: false,
		list: [
			{
				name: '安全培训一体箱',
			},
			{
				name: '安全巡检系统',
			},
			{
				name: '现场人员管理系统',
			},
			{
				name: '塔机安全监控系统',
			},
			{
				name: 'AI智能大脑',
			},
			{
				name: '吊钩可视化监控系统',
			},
			{
				name: '临界防护系统',
			},

			{
				name: '有害气体监测系统',
			},
			{
				name: '智能烟感监控系统',
			},

		]
	},
	{
		name: '应用案例',
		show: false,
		list: [
			{
				name: '广州富利集团合作案例',
			},
			{
				name: '上海建工五建集团合作案例',
			},
			{
				name: '中国建筑第八工程局有限公司合作案例',
			},
			{
				name: '金广建筑集团合作案例',
			},
			{
				name: '大连钜丰建筑工程有限公司合作案例',
			},
			{
				name: '上海名华工程建筑有限公司合作案例',
			}
		]
	},
	{
		name: '新闻动态'
	},
	{
		name: '联系我们',
		show: false,
		list: [
			{
				name: '联系方式',
			},
			{
				name: '在线留言',
			}
		]
	}
])
const productList = ref([])
const applicationList = ref([])
const newList = ref([])
const showsider = ref(true)
const onmove = () => {
	showsider.value = !showsider.value
}

const onres = () => {
	service.get('/api/article/lists?cid=' + 3).then(res => {
		// console.log('产品-------0', res.data)
		productList.value = res.data.lists
	})
	service.get('/api/article/lists?cid=' + 4).then(res => {
		// console.log('应用-------0', res.data)
		applicationList.value = res.data.lists
	})
	service.get('/api/article/lists?cid=' + 5).then(res => {
		// console.log('新闻-------0', res.data)
		newList.value = res.data.lists
	})
}

const store = storeToRefs(useAppStore())
const showindex = store.showindex
const showHeader = ref(false)
const go = () => {
	let height = document.body.scrollTop || document.documentElement.scrollTop
	if (height > 0) {
		showHeader.value = true
	} else {
		showHeader.value = false
	}
}
const onurl = (i: any, type: any) => {
	if (headerList.value[i].show == false) {
		headerList.value[i].show = true
	} else {
		headerList.value[i].show = false
	}
	showsider.value = true
	useAppStore().showindexing(i)
	useAppStore().onshowi(type)
	useAppStore().onshowdel(true)
	document.body.scrollTop = 0
	document.documentElement.scrollTop = 0
	if (i == 3) {
		useAppStore().onshowdel(false)
		useAppStore().onapplicationindex(type)
	}
}
const ontab = async (val: any, type: any) => {
	if (type) {
		if (headerList.value[val].show == false) {
			headerList.value[val].show = true
			for (var a in headerList.value) {
				if (a != val) {
					headerList.value[a].show = false
				}
			}
		} else {
			headerList.value[val].show = false
		}

	} else {
		showsider.value = true
		showindex.value = val
		useAppStore().showindexing(val)
		useAppStore().onshowdel(true)
		useAppStore().onshowi(0)
		document.body.scrollTop = 0
		document.documentElement.scrollTop = 0
		headerList.value = [
			{
				name: '首页',
			},
			{
				name: '关于我们',
				show: false,
				list: [
					{
						name: '公司简介',
					},
					{
						name: '实力证明',
					}
				]
			},
			{
				name: '产品介绍',
				show: false,
				list: [
					{
						name: '安全培训一箱',
					},
					{
						name: '安全巡检系统',
					},
					{
						name: '现场人员管理系统',
					},
					{
						name: '塔机安全监控系统',
					},
					{
						name: 'AI智能大脑',
					},
					{
						name: '吊钩可视化监控系统',
					},
					{
						name: '临界防护系统',
					},

					{
						name: '有害气体监测系统',
					},
					{
						name: '智能烟感监控系统',
					},

				]
			},
			{
				name: '应用案例',
				show: false,
				list: [
					{
						name: '广州富利集团合作案例',
					},
					{
						name: '上海建工五建集团合作案例',
					},
					{
						name: '中国建筑第八工程局有限公司合作案例',
					},
					{
						name: '金广建筑集团合作案例',
					},
					{
						name: '大连钜丰建筑工程有限公司合作案例',
					},
					{
						name: '上海名华工程建筑有限公司合作案例',
					}
				]
			},
			{
				name: '新闻动态'
			},
			{
				name: '联系我们',
				show: false,
				list: [
					{
						name: '联系方式',
					},
					{
						name: '在线留言',
					}
				]
			}
		]
	}
}
const showMobile = ref(null)
onMounted(() => {
	showMobile.value = isMobile() //true 移动端 false pc
	window.addEventListener('scroll', go, true)
	onres()
})
</script>

<style lang="scss" scoped>
$transition: 200ms;

.home {
	position: relative;
	width: 100vw;
	min-height: 100px;
	box-sizing: border-box;
	// overflow: hidden;

	.main {
		position: absolute;
		width: 100%;
		transition: $transition;
	}

	.siders {
		position: fixed;
		right: 0;
		width: 160px;
		height: 100vh;
		z-index: 999;
		transition: $transition;
		background-color: #1B1B1B;

		.card {
			width: 100%;
			min-height: 46px;
			line-height: 46px;
			border-bottom: 1px solid #2d2d2d;
			color: #fff;
			text-indent: 10px;
			font-size: 14px;
		}

		.cards {
			width: 100%;
			min-height: 40px;
			line-height: 40px;
			border-bottom: 1px solid #2d2d2d;
			color: #fff;
			text-indent: 10px;
			font-size: 14px;
			transition: $transition;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}
</style>